<template>
    <div class="mainWrapper">
		<el-breadcrumb separator="/">
			<el-breadcrumb-item :to="{ path: '/' }">
				<i class="lh lh-diaodu fw_100"></i>
			</el-breadcrumb-item>
			<el-breadcrumb-item>技术服务费设置</el-breadcrumb-item>
			<el-breadcrumb-item>新增节假日加价</el-breadcrumb-item>
		</el-breadcrumb>
		<div class="content_Box box-shadow mt_15 px_10">
			<h4 class="border-bottom pb_10 mb_20">新增节假日加价</h4>
			<el-form :model="formData" :rules="rules" ref="formData" label-width="100px" class="mw_800">
				<el-form-item class="form-item" label="执行城市" prop="city_id">
					<el-select :disabled='lookDisabled' v-model="formData.city_id" placeholder="请选择" @change="changeCity">
						<el-option
							v-for="item in cityList"
							:key="item.id"
							:label="item.city_name"
							:value="item.id"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item class="form-item" label="执行商圈" prop="area_id">
					<el-select :disabled='lookDisabled' filterable v-model="formData.area_id" placeholder="商圈" @change="priceChange">
						<!-- <el-option v-if="formData.city_id && roleType == '1'" label="全部" value='0'></el-option> -->
						<el-option
							v-for="item in areaList"
							:key="item.id"
							:label="item.area_name"
							:value="item.id"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item class="form-item" label="所属行业" prop="industry">
					<el-select :disabled='lookDisabled' v-model="formData.industry" placeholder="请选择" @change="changeIndustry">
						<el-option
							v-for="(item, index) in industryJobList"
							:key="index"
							:label="item.label_name"
							:value="item.id"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item class="form-item" label="岗位名称" prop="label_id">
					<el-select :disabled='lookDisabled' v-model="formData.label_id" placeholder="请选择" @change="priceChange">
						<el-option
							v-for="item in job_type"
							:key="item.id"
							:label="item.label_name"
							:value="item.id"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item class="form-item" label="加价方式" prop="type">
					<el-select v-model="formData.type" :disabled='lookDisabled'>
						<el-option label="小时" value="hour"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item class="form-item" label="加价名称" prop="name">
					<el-input @change="removeAllSpace" :disabled='lookDisabled' type="input" v-model="formData.name" class="w_300" placeholder="请输入加价名称" maxlength="20"></el-input>
				</el-form-item>
				<el-form-item class="form-item" label="加价开始日期" prop="start_time">
					<el-date-picker :picker-options="pickerOptions" :disabled='lookDisabled' v-model="formData.start_time" class="w_190i" type="date" value-format="yyyy-MM-dd" format="yyyy-MM-dd" placeholder="加价开始日期"></el-date-picker> 
				</el-form-item>
				<el-form-item class="form-item" label="加价结束日期" prop="end_time">
					<el-date-picker :picker-options="pickerOptions" :disabled='lookDisabled' v-model="formData.end_time" class="w_190i" type="date" value-format="yyyy-MM-dd" format="yyyy-MM-dd" placeholder="加价结束日期"></el-date-picker> 
				</el-form-item>
				<div class="form-item flex">
					<div class="label"><span class="redStart">*</span>价格调整</div>
					<div>
						<div class="rule-list">
							<div class="rule-item mb_0 mt_10">
								<div class="rule-item-label mr_20">黄金</div>
								<div class="rule-item-text">劳动者加价</div>
								<el-input class="w_100 mx_15" placeholder="请输入" :disabled='disabled' v-model="formData.premium30" :change="checkPrice('30')"></el-input>
								<div class="rule-item-text">元/小时,其中商家承担</div>
								<el-input class="w_100 mx_15" placeholder="请输入" :disabled='disabled' v-model="formData.premiumB30" :change="checkPrice('B30')"></el-input>
								<div class="rule-item-text">元/小时</div>
							</div>
							<div class="rule-prompt pl_50 mb_10" v-if="formData.premium30 && !promptDisabled || formData.premiumB30 && !promptDisabled">
								<span v-if="priceCode == '601'"> {{ priceMsg }} </span>
								<span v-else>
									调整后劳动者<span>{{+(Number(promptPrice.premium30/100) + Number(formData.premium30)).toFixed(2)}}</span>元/小时，商家<span>{{+(Number(promptPrice.premiumB30/100) + Number(formData.premiumB30)).toFixed(2)}}</span>元/小时 (单店定价以单店价格为准)
								</span>
							</div>
							<div class="rule-item mb_0 mt_10">
								<div class="rule-item-label mr_20">白银</div>
								<div class="rule-item-text">劳动者加价</div>
								<el-input class="w_100 mx_15" placeholder="请输入" :disabled='disabled' v-model="formData.premium20" :change="checkPrice('20')"></el-input>
								<div class="rule-item-text">元/小时,其中商家承担</div>
								<el-input class="w_100 mx_15" placeholder="请输入" :disabled='disabled' v-model="formData.premiumB20" :change="checkPrice('B20')"></el-input>
								<div class="rule-item-text">元/小时</div>
							</div>
							<div class="rule-prompt pl_50 mb_10" v-if="formData.premium20 && !promptDisabled || formData.premiumB20 && !promptDisabled">
								<span v-if="priceCode == '601'"> {{ priceMsg }} </span>
								<span v-else>
									调整后劳动者<span>{{+(Number(promptPrice.premium20/100) + Number(formData.premium20)).toFixed(2)}}</span>元/小时，商家<span>{{+(Number(promptPrice.premiumB20/100) + Number(formData.premiumB20)).toFixed(2)}}</span>元/小时 (单店定价以单店价格为准)
								</span>
							</div>
							<div class="rule-item mb_0 mt_10">
								<div class="rule-item-label mr_20">青铜</div>
								<div class="rule-item-text">劳动者加价</div>
								<el-input class="w_100 mx_15" placeholder="请输入" :disabled='disabled' v-model="formData.premium10" :change="checkPrice('10')"></el-input>
								<div class="rule-item-text">元/小时,其中商家承担</div>
								<el-input class="w_100 mx_15" placeholder="请输入" :disabled='disabled' v-model="formData.premiumB10" :change="checkPrice('B10')"></el-input>
								<div class="rule-item-text">元/小时</div>
							</div>
							<div class="rule-prompt pl_50 mb_10" v-if="formData.premium10 && !promptDisabled || formData.premiumB10 && !promptDisabled">
								<span v-if="priceCode == '601'"> {{ priceMsg }} </span>
								<span v-else>
									调整后劳动者<span>{{+(Number(promptPrice.premium10/100) + Number(formData.premium10)).toFixed(2)}}</span>元/小时，商家<span>{{+(Number(promptPrice.premiumB10/100) + Number(formData.premiumB10)).toFixed(2)}}</span>元/小时 (单店定价以单店价格为准)
								</span>
							</div>
						</div>
						<div class="rule-prompt">
							*青铜级为最低等级，越往上等级越高
						</div>
					</div>
				</div>
				<el-form-item class="form-item" label="备注">
					<el-input :disabled='lookDisabled' type="textarea" v-model="formData.remark" style="width:300px" maxlength="250"></el-input>
				</el-form-item>
				<el-form-item class="mt_30">
					<el-button :disabled='lookDisabled' type="primary" @click="submitForm()">保存</el-button>
					<el-button @click="goBack()">返回</el-button>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>

<script>
const MAX_RULE_COUNT = 5
import { fetchCityList } from '@/api/city.js'
import { fetchAreaList,fetchShopList,fetPromptPriceList,addShopPrice,fetAddPrice } from '@/api/shop.js'
import { fetchIndustryJob } from '@/api/label.js'

export default {
	name: 'addManageFee',
	data() {
		return {
			cityList: [], // 城市列表
			industryJobList: [], //行业列表
			job_type: [], //岗位列表 
			formData: {
				city_id: '', // 城市
				area_id: '', // 商圈
				industry: '', // 所属行业
				label_id: '', // 岗位名称
                type: 'hour', //加价方式
                premium10: '', //价格
                premiumB10: '', //价格
                premium20: '', //价格
                premiumB20: '', //价格
                premium30: '', //价格
                premiumB30: '', //价格
				start_time: '', //开始日期
				end_time: '', //结束日期
				remark: ''
			},
            //提示调整价格
            promptPrice:{
                premium10: '', //价格
                premiumB10: '', //B价格
                premium20: '', //价格
                premiumB20: '', //B价格
                premium30: '', //价格
                premiumB30: '', //B价格
            },
			rules: {
				city_id: [{ required: true, message: '请选择执行城市', trigger: 'change' }],
				area_id: [{ required: true, message: '请选择商圈', trigger: 'change' }],
				industry: [{ required: true, message: '请选择所属行业', trigger: 'change' }],
				label_id: [{ required: true, message: '请选择岗位名称', trigger: 'change' }],
				type: [{ required: true, message: '请选择加价方式', trigger: 'change' }],
				name:  [{ required: true, message: '请输入加价名称', trigger: 'change' }],
				start_time: [{ required: true, message: '请选择加价开始日期', trigger: 'change' }],
				end_time: [{ required: true, message: '请选择加价结束日期', trigger: 'change' }]
			},
			areaList: [], //商圈列表
			staff_type: '', // 人才类型
			mangeFee: '5',//管理费
            shopList: [], //店铺列表
            priceList: [], //提示价格列表
			disabled: true,
			lookDisabled: false,
			roleType: '',
			pickerOptions: {
				disabledDate(v) {
				return v.getTime() < new Date().getTime();
				}
			},
			priceCode: '',
			priceMsg: '',
			promptDisabled: true
		}
	},
	watch: {
		'formData.premium30': {
			handler: function() {
				this.getPromptPriceList();
			}
		},
		'formData.premiumB30': {
			handler: function() {
				this.getPromptPriceList();
			}
		},
		'formData.premium20': {
			handler: function() {
				this.getPromptPriceList();
			}
		},
		'formData.premiumB20': {
			handler: function() {
				this.getPromptPriceList();
			}
		},
		'formData.premium10': {
			handler: function() {
				this.getPromptPriceList();
			}
		},
		'formData.premiumB10': {
			handler: function() {
				this.getPromptPriceList();
			}
		},
	},
	created(){
		if(this.$route.query.id){
			let { name,city_id,industry,label_id,premium10,premium20,premium30,premiumB10,premiumB20,premiumB30,remark,id,area_id,type,start_time,end_time } = this.$route.query;
			this.formData.city_id = +city_id;
			this.formData.area_id = +area_id;
			this.formData.industry = +industry;
			this.formData.label_id = +label_id;
			this.formData.type = type;
			this.formData.name = name;
			this.formData.start_time = start_time;
			this.formData.end_time = end_time;
			this.formData.premium10 = +premium10/100;
			this.formData.premium20 = +premium20/100;
			this.formData.premium30 = +premium30/100;
			this.formData.premiumB10 = +premiumB10/100;
			this.formData.premiumB20 = +premiumB20/100;
			this.formData.premiumB30 = +premiumB30/100;
			this.formData.remark = remark;
			this.formData.id = +id;
			this.disabled = true
			this.lookDisabled = true
			this.promptDisabled = false
			this.getIndustryJob()
			this.getAreaList()
            this.listUser()
			this.getPromptPriceList()
		}
	},
	mounted() {
		let ret = JSON.parse(sessionStorage.getItem('manageInfo'));
		this.roleType = ret.role_info.type
		// 获取城市列表
		this.getCityList()
	},
	methods: {
		// 获取城市列表
		async getCityList() {
			try {
				let ret = await fetchCityList()
				this.cityList = ret.list
			} catch (err) {
				console.log('err:', err)
			}
		},
        // 获取商圈
		async getAreaList() {
			try {
				let ret = await fetchAreaList({
					city_id: this.formData.city_id
				})
				let arr = []
				if(this.roleType == '1' || this.formData.id){
					arr.push({area_name:'全部',id:+0})
				}
				ret.list.forEach(item => {
					if(item.area_name != '无商圈'){
						let obj = {
							area_name:item.area_name,
							id: +item.id
						}
						arr.push(obj)
					}
				})
				this.areaList = arr
			} catch (err) {
				console.log('err:', err)
			}
		},
        //店铺列表
        async listUser() {
            try {
                let ret = await fetchShopList({
                    sign_status: 30, //已合作的店铺
                    status: 1, //启用的店铺
                    city_id: this.formData.city_id
                })
                if (ret.list.length) {
                    ret.list.forEach(item => {
                        item.value = item.name
                    })
                    this.shopList = ret.list
                } else {
                    this.shopList = []
                }
            } catch (err) {
                console.log(err)
            }
        },
		// 监听城市val变化
		changeCity() {
			this.formData.industry = ''
			this.formData.label_id = ''
			this.formData.area_id = ''
			this.getIndustryJob()
			this.getAreaList()
            this.listUser()
			this.priceChange()
		},
		//行业列表
		async getIndustryJob() {
			try {
				let ret = await fetchIndustryJob({
					city_id: this.formData.city_id
				})
				this.industryJobList = ret
				if(this.formData.id){
					this.job_type = this.industryJobList.filter(x => x.id == this.formData.industry)[0].children
				}
			} catch (err) {
				console.log(err)
			}
		},
		//监听行业
		changeIndustry() {
			this.priceChange()
			this.formData.label_id = ''
			this.job_type = this.industryJobList.filter(x => x.id == this.formData.industry)[0].children
		},
        //查询价格提示
        async getPromptPriceList(){
            try {
				let ret = await fetPromptPriceList({
					city_id: this.formData.city_id,
					area_id: this.formData.area_id,
                    industry: this.formData.industry,
                    label_id: this.formData.label_id,
					data_type: 'premium',
                    type:'',
					shop_sn: ''
				})
				this.priceCode = ret.code
				this.priceMsg = ret.msg
				this.priceList = ret
                this.priceList.forEach(item => {
					this.promptPrice['premium' + item.type] = item.staff_price
                    this.promptPrice['premiumB' + item.type] = item.shop_price
				})
			} catch (err) {
				console.log(err)
			}
        },
		// 确认添加
		async submitForm() {
			this.compareDate(this.formData.start_time,this.formData.end_time)
			let validate = await this.$refs.formData.validate().catch(err => err)
			if (!validate) { return }
			if(!this.formData.premium10||!this.formData.premiumB10||!this.formData.premium20||!this.formData.premiumB20||!this.formData.premium30||!this.formData.premiumB30){
				this.$message.error('价格调整不能为空') 
				return;
			}else if(+this.formData.premium30>+this.formData.premiumB30 || +this.formData.premium20>+this.formData.premiumB20 || +this.formData.premium10>+this.formData.premiumB10){
				this.$message.error('商家承担价格不能小于劳动者加价')
				return;
			}
			// 验证成功  提交后台
			this.addActivity()
		},

		// 创建单店加价
		async addActivity() {
			let obj = {
				name:this.formData.name, // 加价名称
				city_id: this.formData.city_id, // 城市
				area_id: this.formData.area_id, //商圈
				industry: this.formData.industry, // 所属行业
				label_id: this.formData.label_id, // 岗位名称
				type: this.formData.type, //加价类型
				premium10: +((this.formData.premium10*100).toFixed(2)), //青铜价格
				premiumB10: +((this.formData.premiumB10*100).toFixed(2)), //青铜价格
				premium20: +((this.formData.premium20*100).toFixed(2)), //白银价格
				premiumB20: +((this.formData.premiumB20*100).toFixed(2)), //白银价格
				premium30: +((this.formData.premium30*100).toFixed(2)), //黄金价格
				premiumB30: +((this.formData.premiumB30*100).toFixed(2)), //黄金价格
				start_time: this.formData.start_time,
				end_time: this.formData.end_time,
				remark: this.formData.remark, //备注
			}
			try {
				await fetAddPrice(obj)
				this.$message.success('保存成功')
				this.$router.go(-1)
			} catch (err) {
				console.log('error:', err)
			}
		},
        //价格监听
		async checkPrice (type) {
			let checkPlan = this.formData['premium' + type] + ''
			checkPlan = checkPlan.replace(/[^\d.]/g, '') // 清除“数字”和“.”以外的字符
				.replace(/\.{2,}/g, '.') // 只保留第一个. 清除多余的
				.replace(/^\./g, '') // 保证第一个为数字而不是.
				.replace('.', '$#$')
				.replace(/\./g, '')
				.replace('$#$', '.')
				.replace(/^()*(\d+)\.(\d\d).*$/, '$1$2.$3') 
				// if(checkPlan>50){
				// 	checkPlan = 50 + ''
				// }
			this.formData['premium' + type] = checkPlan
		},
		//去除全部空格
		removeAllSpace() {
			this.formData.name = this.formData.name.replace(/\s+/g, "");
		},
		//价格是否能编辑
		priceChange(){
			if(
				this.formData.city_id 
				&& this.formData.area_id.toString()
				&& this.formData.industry 
				&& this.formData.label_id 
			){
				this.disabled = false
				this.promptDisabled = false;
        		this.getPromptPriceList()
			}else{
				this.disabled = true
				this.promptDisabled = true;
			}
		},
		// 比较时间大小
		compareDate(date1,date2){
			var oDate1 = new Date(date1);
			var oDate2 = new Date(date2);
			if(oDate1.getTime() > oDate2.getTime()){
				this.$message.error('开始时间不能大于结束时间')
				return;
			}
		},
		// 返回
		goBack() {
			this.$router.go(-1)
		}
	}
}
</script>

<style scoped lang="scss">
	.form-item {
		padding: 10px 0;
		margin-bottom: 0 !important;
	}
	.rule-item {
		display: flex;
		margin-bottom: 20px;
	}
	.rule-item span {
		color: #888;
	}
	.rule-text {
		margin: 0 20px;
	}
	.add-btn {
		color: #fff !important;
	}
	.rule-list{
		border: 1px solid #DCDFE6;
		border-radius: 5px;
		padding: 10px 15px 20px;
		width: 600px;
		line-height: 30px;
		.rule-item{
			.rule-item-label{
				font-weight: bold;
			}
			.rule-item-prompt{
				font-size: 24px;
				margin: 0 15px;
			}
			.rule-item-text{
				color: #666;
				font-size: 13px;
			}
		}
	}
	.rule-prompt{
		color: #D9001B;
		font-size: 12px;
	}
	.label{
		width: 100px;
		padding-right: 12px;
		box-sizing: border-box;
		color: #606266;
		font-size: 12px;
		text-align: right;
	}
	.redStart{
		color: #F56C6C;
		margin-right: 4px;
	}
	>>> input::-webkit-outer-spin-button,
	>>> input::-webkit-inner-spin-button {
	-webkit-appearance: none !important;
	}
	>>> input[type='number'] {
	-moz-appearance: textfield !important;
	}
</style>



// WEBPACK FOOTER //
// src/components/shopPrice/AddPrice.vue